<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>

<html>

<head>
    <link rel="StyleSheet" href="../css/navigate.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/footer.css" type="text/css" media="screen"/>
    <link rel="shortcut icon" href="#"/>

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>JPetStore Demo</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
</head>

<body>

<div id="floatWindow"><div id="displayBlock"></div></div>

<div id="Header">

    <div id="Logo" onclick="window.open('main', '_self')"></div>

    <div id="QuickLinks">
        <div onclick="window.open('viewCategory?categoryId=FISH','_self')" class="link" id="FISH">FISH</div><!--空白注释
        --><div onclick="window.open('viewCategory?categoryId=DOGS','_self')" class="link" id="DOGS">DOG</div><!--空白注释
        --><div onclick="window.open('viewCategory?categoryId=REPTILES','_self')" class="link" id="REPTILES">REPTILE</div><!--空白注释
        --><div onclick="window.open('viewCategory?categoryId=CATS','_self')" class="link" id="CATS">CAT</div><!--空白注释
        --><div onclick="window.open('viewCategory?categoryId=BIRDS','_self')" class="link bird" id="BIRDS">BIRD</div>
    </div>

    <div id="Search">
        <form action="SearchProduct" id="searchForm" name="search" method="get">
            <input type="text" name="keyword" id="inputSearch" placeholder="Click Here To Search" autocomplete="off"/>
            <div id="searchIcon"></div>
        </form>
    </div>

    <div id="Menu">
        <div class="account" onclick="window.open('viewCart', '_self')">Cart</div>
        <c:if test="${sessionScope.account == null}">
            <div class="account" onclick="window.open('login', '_self')">Sign In</div>
        </c:if>

        <c:if test="${sessionScope.account != null}">
            <c:if test="${!sessionScope.account.authenticated}">
                <div class="account" onclick="window.open('login', '_self')">Sign In</div>
            </c:if>
        </c:if>

        <c:if test="${sessionScope.account != null}">
            <c:if test="${sessionScope.account.authenticated}">
                <div class="account" onclick="window.open('signOut', '_self')">Sign Out</div>
                <div class="account" onclick="window.open('account', '_self')">Account</div>
            </c:if>
        </c:if>
    </div>
</div>

<div id="searchResult"></div>

<script type="text/javascript" src="../../../static/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="../../../static/js/jqueryExtension.js"></script>
<script type="text/javascript" src="../../../static/js/JavaScriptExtension.js"></script>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $('#inputSearch').on('focus', ()=>
        {
            $('#searchResult').css('display', 'block');
            setTimeout(()=>
            {
                $('#searchResult').addClass('show').removeClass('hide');
            }, 100);
        }).on('input', (event)=>
        {
            var $keyword = 'keyword=' + $('#inputSearch').val();
            $.get('autoComplete', $keyword, (data)=>
            {
                var tipItems = data['tipItems'];
                $('#searchResult').empty().css('height', 30 * tipItems.length + 'px');
                for(let i=0;i<tipItems.length;i++)
                {
                    var item = '<div class="tipItem" onmousedown="window.open(\'viewProduct?productId='+ tipItems[i]['productId'] +'\', \'_self\')">' + tipItems[i]['name'] + '</div>';
                    $('#searchResult').append(item);
                }
                if(tipItems.length <= 0)
                {
                    $('#searchResult').append('<div class="tipItem">No Related Products Found</div>');
                }
            });
        }).on('blur', ()=>
        {
            $('#searchResult').addClass('hide').removeClass('show').empty().css('height', '100px');
            setTimeout(()=>
            {
                $('#searchResult').css('display', 'none');
            }, 200);
        });

        var index = $.getUrlParam('categoryId');
        $.each($('.link'), (i, link)=>
        {
           if(link.id !== index)
           {
               $(link).removeClass('selected');
           }
           else
           {
               $(link).addClass('selected');
           }
        });

        $('#searchIcon').on('click', ()=>
        {
            $('#searchForm').submit();
        });

        $('#Content').on("mousewheel DOMMouseScroll", function (e) {
            var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox

            if (delta > 0) {
                $('#Header').addClass('showHeader').removeClass('hideHeader');
            } else if (delta < 0) {
                if($(document).scrollTop() > 80)
                {
                    $('#Header').addClass('hideHeader').removeClass('showHeader');
                }
            }
        });
    });
</script>

<div id="Content">
